
import QueryFilter from "@/components/QueryFilter"
import useAntdList from "@/hooks/useAntdList"
import { queryMonitorError } from "@/service/monitor"
import { Card, Form, Table } from "antd"
import { G2, Line } from '@ant-design/plots';
import { useEffect, useState } from "react";
import ErrorFilter from "./components/ErrorFilter";
import moment from "moment";
import { formatDate } from "@/utils/utils";
const date = (d:any)=>{
  const dd = [...d];
  // return dd
  const values = {};
  dd.forEach(item=>{
      const key = moment(item.createdAt).format('YYYY-MM-DD HH:mm')
       if(!values[key]){
         values[key] = 0;
       }
       values[key]= values[key]+1;
  })
  return Object.keys(values).map(key=>{
    return {
      key,
      count:values[key]
    }
  })
  // for(let i=0;i<24;i++){
  //   let k = i<10?`0${i}`:i
  //   if(!d.find(v=>v.k)){
  //     d.push({
  //       count: 0,
  //       hour: k
  //     })
  //   }
  // }
  // return d.map(v=>{
  //    v.createdAt = moment(v.createdAt).format('YYYY-MM-DD HH:mm')
  //   return v;
  // })
}
const App = () => {
  const [form] = Form.useForm();
  const { search, tableProps } = useAntdList(queryMonitorError, {});
  const columns = [{
    title: '错误文件',
    dataIndex: 'filename'
  }, {
    title: '错误信息',
    dataIndex: 'message'
  }, {
    title: '错误类型',
    dataIndex: 'source'
  }, {
    title: '行号',
    dataIndex: 'colno'
  }, {
    title: '列号',
    dataIndex: 'lineno'
  }, {
    title: '状态',
    dataIndex: 'status'
  }, 
  // {
  //   title: 'ua',
  //   dataIndex: 'ua'
  // }, 
  {
    title: '时间',
    dataIndex: 'createdAt',
    render:(_)=>formatDate(_)

  }, {
    title: '时间',
    dataIndex: 'updatedAt',
    render:(_)=>formatDate(_)
  }]
  const [data, setData] = useState([]);

  // useEffect(() => {
  //   asyncFetch();
  // }, []);

  // const asyncFetch = () => {
  //   fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/cpu-data.json')
  //     .then((response) => response.json())
  //     .then((json) => setData(json))
  //     .catch((error) => {
  //       console.log('fetch data failed', error);
  //     });
  // };
  // G2.registerShape('point', 'breath-point', {
  //   draw(cfg, container) {
  //     const data:any = cfg.data;
  //     const point:any = {
  //       x: cfg.x,
  //       y: cfg.y,
  //     };
  //     const group = container.addGroup();

  //     if (data.time === '14.20' && data.date === 'today') {
  //       const decorator1 = group.addShape('circle', {
  //         attrs: {
  //           x: point.x,
  //           y: point.y,
  //           r: 10,
  //           fill: cfg.color,
  //           opacity: 0.5,
  //         },
  //       });
  //       const decorator2 = group.addShape('circle', {
  //         attrs: {
  //           x: point.x,
  //           y: point.y,
  //           r: 10,
  //           fill: cfg.color,
  //           opacity: 0.5,
  //         },
  //       });
  //       const decorator3 = group.addShape('circle', {
  //         attrs: {
  //           x: point.x,
  //           y: point.y,
  //           r: 10,
  //           fill: cfg.color,
  //           opacity: 0.5,
  //         },
  //       });
  //       decorator1.animate(
  //         {
  //           r: 20,
  //           opacity: 0,
  //         },
  //         {
  //           duration: 1800,
  //           easing: 'easeLinear',
  //           repeat: true,
  //         },
  //       );
  //       decorator2.animate(
  //         {
  //           r: 20,
  //           opacity: 0,
  //         },
  //         {
  //           duration: 1800,
  //           easing: 'easeLinear',
  //           repeat: true,
  //           delay: 600,
  //         },
  //       );
  //       decorator3.animate(
  //         {
  //           r: 20,
  //           opacity: 0,
  //         },
  //         {
  //           duration: 1800,
  //           easing: 'easeLinear',
  //           repeat: true,
  //           delay: 1200,
  //         },
  //       );
  //       group.addShape('circle', {
  //         attrs: {
  //           x: point.x,
  //           y: point.y,
  //           r: 6,
  //           fill: cfg.color,
  //           opacity: 0.7,
  //         },
  //       });
  //       group.addShape('circle', {
  //         attrs: {
  //           x: point.x,
  //           y: point.y,
  //           r: 1.5,
  //           fill: cfg.color,
  //         },
  //       });
  //     }

  //     return group;
  //   },
  // });
  console.log('sss',date(tableProps.dataSource))
  const config:any = {
    autoFit: true,
    height: 500,
    data:date(tableProps.dataSource),
    // meta: {
    //   updatedAt: {
    //     time: {
    //       type: 'quantile',
    //     },
    //     // max: 100,
    //     // min: 0,
    //   },
    // },
    // xAxis: {
    //   type: 'timeCat',
    //   tickCount: 5,
    // },
    // yField: 'colno',
    // xField: 'updatedAt',
    xField: 'key',
    yField: 'count',
    meta:{
      count:{
        alias: '数量',
      }
    },
    // seriesField: 'colno',
    tooltip: {
      showMarkers: false,
    },
    smooth: true,
    point: {
      shape: 'breath-point',
    },
  };
  return <Card>
    {/* <ErrorFilter/> */}
    <QueryFilter
      items={[{
        label: '错误类型',
        name: '错误类型'
      }, {
        label: '状态',
        name: '状态'
      }, {
        label: '时间',
        name: '时间'
      }, {
        label: '浏览器',
        name: '浏览器'
      }, {
        label: '操作系统',
        name: '操作系统'
      }, {
        label: 'IP',
        name: 'IP'
      }, {
        label: '分配',
        name: '分配'
      }, {
        label: '网络类型',
        name: '网络类型'
      }]} form={form} {...search} />
    <div style={{ height: 200 }}>

      <Line {...config} />
    </div>
    <Table rowKey='id' {...tableProps} columns={columns} />
  </Card>
}
export default App